<!-- 参考官方文档 -->
<template>
    <view class="box-layout">
        <image :class="isActive?'active':''" src="../../../common/image/小鸡.gif"></image>
        <input @focus="onFocus" @blur="onBlur"></input>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';

    let isActive = ref(false);

    //获取焦点
    function onFocus() {
        isActive.value = true;
    }
    //失去焦点
    function onBlur() {
        isActive.value = false;
    }
</script>

<style lang="scss" scoped>
    .box-layout {
        margin-top: 24px;

        image {
            width: 24px;
            height: 24px;
            position: absolute;
            left: calc(50% - 12px);
            top: 0;
            z-index: 1;
            transition: top 0.3s;
        }

        image.active {
            top: -24px;
        }

        input {
            border: 1px solid $custom-color-green;
            position: relative;
            z-index: 2;
            background: $custom-color-white;
        }
    }
</style>